
<style lang="less">
	page {
		background-color: #F7F7F7;
		padding-bottom: 50upx;
	}
	
	.container {
		padding-top: 30upx;
	}
	.title{
		display: flex;
		.title_list{
			width: 25%;
			box-sizing: border-box;
			border-right: 1upx solid #EDEDED;
			text-align: center;
			background-color: #FFFFFF;
			padding: 24upx 0;
			&:last-of-type{
				border-right: none;
			}
			.title_list_money{
				font-size: 30upx;
				font-family: "DINCond";
				font-weight: 400;
				color: #333333;
				line-height: 48upx;
			}
			.title_list_txt{
				margin-top: 16upx;
				font-size: 20upx;
				font-weight: 500;
				color: #333333;
				line-height: 29upx;
			}
			.title_list_money_active{
				color: #FFFFFF;
			}
		}
		.title_list_active{
			background-color: #DBC291;
		}
		.title_list.active{
			width: 33.33%;
		}
	}
	.main{
		margin-top: 20upx;
		background-color: #FFFFFF;
	}
	.copy{
		margin-left: 10upx;
		width: 28upx;
		height: 28upx;
	}
	.main_list{
		display: flex;
		justify-content: space-between;
		box-sizing: border-box;
		padding: 36upx 30upx;
		border-bottom: 1upx solid #EDEDED;
		&:last-of-type{
			border-bottom: none;
		}
		.main_fl{
			flex: 1;
		}
		.main_str{
			text{
				font-size: 24upx;
				font-weight: bold;
				color: #333333;
				line-height: 42upx;
				margin-right: 10upx;
			}
			.main_order{
				display: inline-block;
				font-size: 24upx;
				font-weight: bold;
				color: #333333;
				line-height: 42upx;
			}
		}
		
		.main_fr_txt{
			margin-top: 16upx;
			font-size: 22upx;
			font-weight: 500;
			color: #999999;
			line-height: 40upx;
			.main_fr_money{
				margin-left: 10upx;
				font-size: 24upx;
				font-family: "DINCond";
				font-weight: 400;
				color: #999999;
				line-height: 48upx;
			}
		}
		.main_fr{
			text-align: right;
		}
		.main_fr_price{
			font-size: 34upx;
			font-family: "DINCond";
			font-weight: 400;
			color: #E93246;
			line-height: 48upx;
		}
		.main_fr_time{
			margin-top: 16upx;
			font-size: 22upx;
			font-weight: 500;
			color: #999999;
			line-height: 42upx;
		}
	}
	.zhao{
		position: fixed;
		z-index: 9;
		left: 0;
		top: 0;
		bottom: 0;
		right: 0;
		background: #000000;
		opacity: 0.4;
	}
	.popup{
		width: 100%;
		position: fixed;
		left: 50%;
		top: 50%;
		transform: translate(-50%,-50%);
		z-index: 10;
		padding: 0 30upx;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		align-items: center;
		.colse_img{
			margin-top: 42upx;
			width: 60upx;
			height: 60upx;
		}
	}
	
	.details{
		width: 100%;
		padding: 46upx 26upx;
		box-sizing: border-box;
		background: #FFFFFF;
		border-radius: 24upx;
		.details_title{
			width: 100%;
			font-size: 34upx;
			font-weight: bold;
			color: #333333;
			line-height: 41upx;
			text-align: center;
		}
		.details_main{
			margin-top: 56upx;
		}
	}
	.details_top{
		margin-bottom: 24upx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		&:last-of-type{
			margin-bottom: 0;
		}
		.details_top_fl{
			flex: 1;
			margin-right: 10rpx;
			.details_order{
				flex: 1;
				display: flex;
				align-items: center;
			}
			text{
				font-size: 22upx;
				font-weight: 500;
				color: #333333;
				line-height: 30upx;
			}
		}
		
		.details_time{
			font-size: 22upx;
			font-weight: 500;
			color: #999999;
			line-height: 36upx;
		}
		.details_top_money{
			margin-left: 10upx;
			font-size: 24upx;
			font-family: "DINCond";
			font-weight: 400;
			color: #999999;
			line-height: 48upx;
		}
		.details_price{
			font-size: 34upx;
			font-family: "DINCond";
			font-weight: 400;
			color: #E93246;
			line-height: 48upx;
		}
	}
	
</style>


<template>

	<view class="container">
		<view class="title">
			<view :class="['title_list',titleInd == 0 ? 'title_list_active' : '',dataTop.shopType==null || dataTop.shopType=='' ? 'active' : '']" @tap="tab(0)">
				<view :class="['title_list_money',titleInd == 0 ? 'title_list_money_active' : '']">{{dataTop.allBalance}}</view>
				<view :class="['title_list_txt',titleInd == 0 ? 'title_list_money_active' : '']">总账户</view>
			</view>
			<view :class="['title_list',titleInd == 1 ? 'title_list_active' : '',dataTop.shopType==null || dataTop.shopType=='' ? 'active' : '']" @tap="tab(1)">
				<view :class="['title_list_money',titleInd == 1 ? 'title_list_money_active' : '']">{{dataTop.balance}}</view>
				<view :class="['title_list_txt',titleInd == 1 ? 'title_list_money_active' : '']">收益账户</view>
			</view>
			<view :class="['title_list',titleInd == 3 ? 'title_list_active': '',dataTop.shopType==null || dataTop.shopType=='' ? 'active' : '']" @tap="tab(3)">
				<view :class="['title_list_money',titleInd == 3 ? 'title_list_money_active' : '']">{{dataTop.giftAmount}}</view>
				<view :class="['title_list_txt',titleInd == 3 ? 'title_list_money_active' : '']">充值余额</view>
			</view>
			<view :class="['title_list',titleInd == 6 ? 'title_list_active': '',dataTop.shopType==null || dataTop.shopType=='' ? 'active' : '']" v-if="dataTop.shopType!='' && dataTop.shopType!=null" @tap="tab(6)">
				<view :class="['title_list_money',titleInd == 6 ? 'title_list_money_active' : '']">{{dataTop.marketing}}</view>
				<view :class="['title_list_txt',titleInd == 6 ? 'title_list_money_active' : '']">营销账户</view>
			</view>
		</view>
		<view class="main">
			<view class="main_list" v-for="(v,i) in list" :key="i" @tap="openPop(v)">
				<view class="main_fl">
					<view class="main_str">
						<text v-if="titleInd==6">{{v.remark}}</text>
						<text v-else>{{v.earningsTypeStr}}</text>
						<view class="main_order" v-if="v.orderNo != null && v.orderNo!=''">
							{{v.orderNo}}
							<image src="/static/img/copy_icon@2x.png" class="copy" @tap.stop="copy(v.orderNo)" mode="widthFix"></image>
						</view>
					</view>
					<view class="main_fr_txt">账户总金额<text class="main_fr_money">{{v.balanceCurrent}}</text></view>
				</view>
				<view class="main_fr">
					<view class="main_fr_price">{{v.priceCurrent}}</view>
					<view class="main_fr_time">{{v.creatTime}}</view>
				</view>
			</view>
		</view>
		<view class="zhao" v-if="hidden == true"></view>
		<view class="popup" v-if="hidden == true">
			<view class="details">
				<view class="details_title">资金详情</view>
				<view class="details_main">
					<view class="details_top">
						<view class="details_top_fl">
							<text v-if="titleInd==6">{{popObj.remark}}</text> 
							<text v-else>{{popObj.earningsTypeStr}}</text>
							<view class="details_order" v-if="popObj.orderNo != null && popObj.orderNo!=''">
								<text>{{popObj.orderNo}}</text>
								<image src="/static/img/copy_icon@2x.png" class="copy" @tap="copy(popObj.orderNo)" mode="widthFix"></image>
							</view>
						</view>
						<view class="details_time">{{popObj.creatTime}}</view>
					</view>
					<view class="details_top">
						<view class="details_time">
							{{popObj.username}}，{{popObj.vipClass}}，{{popObj.mobile}}
						</view>
						<!-- <view class="details_time">取消订单</view> -->
					</view>
					<view class="details_top">
						<view class="details_time">账户总金额<text class="details_top_money">{{popObj.balanceCurrent}}</text></view>
						<view class="details_price">{{popObj.priceCurrent}}</view>
					</view>
				</view>
			</view>
			<image src="https://static.xpandago.net/wechat/images/closed_boxs%402x.png" class="colse_img" @tap="close" mode="widthFix"></image>
		</view>
		<view class="uni-loadmore" v-if="showLoadMore">{{loadMoreText}}</view>
	</view>

</template>

<script>
	import api from '@/common/api';
  export default {

    components: {},

    data () {

      return {
		  popObj:{},  // 弹窗
		  dataTop:{},
		  list:[],
		  titleInd: 0,
		  hidden: false,
		  token: '',
		  page:1,
		  loadMoreText: "加载中...",
		  showLoadMore: false,
		  totalPage:'',//总页数
	  }
    },
	onLoad() {
		this.token = uni.getStorageSync('token')
		this.listTop()
	},
    methods: {
		//头部接口
		async listTop(){
			const [err, res] = await api.listTop({
				 header:{
					'Content-Type': 'application/json',
					'token': this.token
				 }
			 });
			 if(res.data.code == 0){
				 this.dataTop=res.data.data
				 this.newList()
			 }
		},
		//列表
		async newList(){
			const [err, res] = await api.newList({
				query: {
					page: this.page,
					type: this.titleInd,
					limit: 10
				},
				 header:{
					'Content-Type': 'application/json',
					'token': this.token
				 }
			 });
			 if(res.data.code == 0){
				 this.list = [...this.list, ...res.data.data.list];
				  this.totalPage=res.data.data.totalPage
				  if(this.list.length==0){
				 	  this.loadMoreText = "暂无数据!"
				 	 this.showLoadMore = true;
				 }else{
				 	this.showLoadMore = false; 
				 }
			 }
		},
		openPop(v){
			this.hidden = true
			this.popObj = v
		},
		close(){
			this.hidden = false
		},
		tab(ind){
			if(this.titleInd == ind){
				return false
			}
			this.titleInd = ind
			this.page=1
			this.list=[]
			this.newList()
		},
		//复制粘贴
		copy(copy){
		  uni.setClipboardData({
		    data:copy,
		    success (res) {
		      uni.showToast({
		        title: '复制成功',
		        icon:"none"
		      })
		    }
		  })
		},
	},
	onReachBottom() {
		this.showLoadMore = true;
		if (this.page >= this.totalPage) {
			this.loadMoreText = "没有更多数据了!"
			return;
		}else{
			setTimeout(() => {
				this.page++
				this.newList()
			}, 500);
		}
	},
	//下拉刷新
	 onPullDownRefresh() {
		//监听下拉刷新动作的执行方法，每次手动下拉刷新都会执行一次
		this.page=1
		this.list=[]
		this.newList()
		setTimeout(function () {
			uni.stopPullDownRefresh();  //停止下拉刷新动画
		}, 1000);
	}
  }
</script>